<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body class="dpflex fdc">
    <!-- 主题区域 -->
    <div class="content flex1">
        <video id="video" class="video" autoplay muted></video>
        <div class="video-part">
            <h3 class="fs30">
                <span class="current-part" id="currentPart"></span>
                /
                <span class="count-part" id="countPart"></span>
            </h3>
            <p id="title" class="title mt20"></p>
        </div>
    </div>
    <div class="footer">
        <div id="progress" class="progress"></div>
        <div class="control dpflex jcsa">
            <span id="prevBtn" class="iconfont zp-previous"></span>
            <span id="pauseBtn" class="iconfont zp-pause"></span>
            <span id="nextBtn" class="iconfont zp-next"></span>
        </div>
    </div>
    <!-- 蒙层 -->
    <div id="mask" class="mask">
        <p class="mask-top fs20">放弃可以找到一万个理由,坚持只需一个信念</p>
        <div class="play-info dpflex">
            <!-- 暂停按钮 -->
            <div id="continuePlay" class="continue-play mr25">
                <i class="iconfont zp-play"></i>
                <p class="mt8">继续训练</p>
            </div>
            <!-- 结束按钮 -->
            <div id="stopPlay" class="stop-play">
                <i class="iconfont zp-stop"></i>
                <p class="mt8">结束训练</p>
            </div>
            
        </div>
        <div class="info-btm dpflex">
            <img id="currentImg" src="./imgs/index-swiper-bg2.jpg" alt="">
            <div class="pt16">
                <p class="eee">当前:</p>
                <p id="curTitle">胯关节环绕</p>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>

</body>

</html>